<template>
	<view class="my-box">
		<!-- 认证状态 -->
		<view class="auth-status-box" v-if="!isAuth"> 
			<image class="auth-status-logo" src="/static/my_hkd_logo.png" mode="aspectFit"></image>
			<text class="auth-status-text">商家收款服务平台</text>
			<view class="auth-status-btn" :style="authBtnStatusInfo.style" @tap="clickAuthAction">{{authBtnStatusInfo.title}}</view>
		</view>
		<!-- 用户信息 -->
		<view class="user-box" v-if="isAuth">
			<view class="user-top-box">
				<image class="user-msg-icon" src="/static/my_msg_icon.png" mode="aspectFit" @tap="showMessageAction"></image>
			</view>
			<view class="user-bottom-box">
				<image class="user-bottom-logo" :src="$u.test.isEmpty(userStore.user.imgPath) ? '/static/photo_default.png' : userStore.user.imgPath" mode="aspectFill"></image>
				<view class="user-bottom-info">
					<text class="user-bottom-name">{{userStore.user.merName}}</text>
					<text class="user-bottom-code">{{userStore.user.merCode}}</text>
					<text class="user-bottom-phone">{{userStore.user.tel}}</text>
					<view class="user-bottom-alipay" v-if="!$u.test.isEmpty(userStore.user.alipayMerCode)"> 
						<text>{{userStore.user.alipayMerCode}}（支付宝）</text>
						<text class="user-bottom-alipay-copy">复制</text>
					</view>
				</view>
			</view>
			<view class="user-bottom-line"></view>
		</view>
		<!-- 列表菜单 -->
		<view class="my-list">
			<view class="my-list-item" v-for="item in myMenus" :key="item.type" @tap="clickMenuItem(item)">
				<image class="my-list-item-icon" :src="item.icon" mode="aspectFit"></image>
				<text class="my-list-item-title">{{item.name}}</text>
				<image class="my-list-item-right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
			</view>
		</view>
		<xh-service-pop ref="serviceRef"></xh-service-pop>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref,computed } from 'vue'
	import { myMenus } from '@/config/data.js'
	import { useUserStore } from '@/stores'
	//客服弹框ref
	const serviceRef = ref()
	
	const userStore = useUserStore()
	//认证按钮样式
	const authBtnStatusInfo = computed(()=>{
		if(userStore.reportStatus == '3' && userStore.user.authStatus == '00'){
			return {
				style:{'background-color':'#008000'},
				title:'审核中'
			}
		}
		else{
			if(userStore.reportStatus == '2' || userStore.user.authStatus == '03'){
				return {
					style:{'background-color':'#FF0203'},
					title:'重新认证'
				}
			}
			else{
				return {
					style:{'background-color':'#FF0203'},
					title:'马上认证'
				}
			}
		}
	})
	//是否认证成功
	const isAuth = computed(()=>{
		if(userStore.reportStatus == '1' && userStore.user.authStatus == '00'){
			return true
		}
		else{
			return false
		}
	})
	
	//页面显示
	onShow( async ()=>{
		await userStore.updateUserInfo()
	})
	//点击重新认证/马上认证
	const clickAuthAction = ()=>{
		if(authBtnStatusInfo.value.title == '重新认证'){
			console.log('认证')
			uni.navigateTo({
				url:'/pages/result/result?type=fail'
			})
		}
		else if(authBtnStatusInfo.value.title == '马上认证'){
			uni.navigateTo({
				url:'/pages/auth/face-auth/face-auth'
			})
		}
	}
	//点击菜单
	const clickMenuItem = (item)=>{
		console.log(item)
		if(item.type == 1){
			if(uni.$auth.isAuth()){
				uni.navigateTo({
					url:'/pages/home/bankcard-list/bankcard-list'
				})
			}
		}
		else if(item.type == 3){
			if(uni.$auth.isAuth()){
				uni.navigateTo({
					url:'/pages/my/userinfo/userinfo'
				})
			}
		}
		else if(item.type == 4){
			uni.navigateTo({
				url:'/pages/my/agreement/agreement'
			})
		}
		else if(item.type == 5){
			serviceRef.value.open()
		}
		else if(item.type == 6){
			uni.navigateTo({
				url:'/pages/my/about-us/about-us'
			})
		}
		else if(item.type == 7){
			uni.$auth.logout()
			uni.reLaunch({
				url:'/pages/login/login'
			})
		}
	}
	//消息
	const showMessageAction = ()=>{
		uni.navigateTo({
			url:'/pages/my/message/message'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}
	.my-box {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: white;
		.auth-status-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #3F4C5D;
			border-bottom: 10px solid $xh-bg-color;
			padding: 50rpx 0;
			.auth-status-logo {
				width: 124rpx;
				height: 138rpx;
			}

			.auth-status-text {
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.auth-status-btn {
				padding: 0 54rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #FF0203;
				color: white;
				margin-top: 36rpx;
				border-radius: 30rpx;
				font-size: 30rpx;
			}
		}
		.user-box{
			background-image: url('/static/my_bg.png');
			background-size: cover;
			padding: 30rpx 30rpx 0;
			position: relative;
			.user-top-box{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.user-msg-icon{
					width: 52rpx;
					height: 52rpx;
				}
			}
			.user-bottom-box{
				display: flex;
				align-items: flex-start;
				margin-top: 60rpx;
				padding-bottom: 50rpx;
				.user-bottom-logo{
					width: 128rpx;
					height: 128rpx;
					border-radius: 64rpx;
				}
				.user-bottom-info{
					display: flex;
					flex-direction: column;
					color: white;
					font-size: 24rpx;
					margin-left: 30rpx;
					flex: 1;
					.user-bottom-name{
						font-size: 28rpx;
					}
					.user-bottom-code{
						margin-top: 12rpx;
					}
					.user-bottom-phone{
						margin-top: 12rpx;
					}
					.user-bottom-alipay{
						margin-top: 12rpx;
					}
				}
			}
			.user-bottom-line{
				position: absolute;
				background-color: white;
				height: 20rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				margin-top: 30rpx;
				left: 0;
				bottom: -1px;
				right: 0;
			}
		}
		.my-list{
			.my-list-item{
				padding: 0 40rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: $xh-title-color;
				&:nth-of-type(1){
					margin-top: 10rpx;
				}
				.my-list-item-icon{
					width: 48rpx;
					height: 48rpx;
				}
				.my-list-item-title{
					margin-left: 20rpx;
				}
				.my-list-item-right-icon{
					width: 24rpx;
					height: 24rpx;
					margin-left: auto;
				}
				
			}
		}
	}
</style>